<template>
  <view class="header-section">
    <swiper class="swiper"  autoplay="true" 
      :indicator-dots="false" interval="5000" 
      duration="500" circular="true"
      :current="current"
      v-if="props.imgList.length > 0"
      @change="onSwiperChange">
      <swiper-item v-for="(item, index) in props.imgList" :key="index">
        <image :src="item.imageUrl" class="header-bg" @click="() => handleJump(item)" />
      </swiper-item>
    </swiper>
    <view class="custom-dots">
      <view
        v-for="(item, idx) in props.imgList"
        :key="idx"
        :class="['dot', current === idx ? 'active' : '']"
      ></view>
    </view>
    <view class="swiper-bottom">
      <image class="swiper-bottom-bg" src="https://cdn.xmxiaomai.com/isong_static/newwan.png" mode="widthFix" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Index } from '@/api/data';
const current = ref(0);
const handleJump = (item: Index.Banner.Data) => {
  // destinationKey 跳转类型 0-无跳转 1-小程序一级页 2-小程序二级页 3-公众号图文 4-网页
  // 处理跳转逻辑
  switch (item.destinationKey) {
    case 1:
      uni.switchTab({
        url: item.destinationUrl,
      });
      break;
    case 2:
      uni.navigateTo({
        url: item.destinationUrl,
      });
      break;
    case 3:
      // 公众号
      uni.navigateTo({
        url: '/pages/sub/webview/index?url=' + encodeURIComponent(item.destinationUrl),
      });
      break;
    case 4:
      // 外链
      uni.navigateTo({
        url: '/pages/sub/webview/index?url=' + encodeURIComponent(item.destinationUrl),
      });
      break;
    default:
      return;
  }
};

const props = defineProps({
  imgList: {
    type: Array as () => Index.Banner.Data[],
    default: () => [],
  },
});

function onSwiperChange(e) {
  current.value = e.detail.current;
}
</script>

<style lang="scss" scoped>
.header-section {
  position: relative;
  width: 100%;
  height: 764rpx;
  .header-bg {
    width: 100%; /* 设置图片宽度 */
    height: 764rpx; /* 设置图片高度 */
  }
  .swiper {
    width: 100%;
    height: 764rpx;
  }
  .custom-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    .dot {
      width: 8rpx;
      height: 8rpx;
      background-color: rgba(0,0,0,0.6);
      border-radius: 50%;
      margin: 0 8rpx;
      transition: background 0.3s;
      &.active {
        background-color: transparent;
        background-image: url('https://cdn.xmxiaomai.com/isong_static/Stroke%201.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 32rpx;
        height: 9.33rpx;
        border-radius: 8rpx;
      }
    }
  }
  .swiper-bottom {
      position: absolute;
      bottom: -1rpx;
      width: 100%;
      // background: #024f3f;
      height: 115.33rpx;
      .swiper-bottom-bg {
        width: 100%;
        height: 100%;
      }
    }
}
</style>
